<template>
    <div :class="['head-box',isShow?'':'head-box-index']">
        <div id="logo" ><img src="../assets/logo.png"  :class="[isShow?'':'head-margin']" /></div>
        <div class="head-list" v-if="isShow">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"><a href="/index">首页</a></el-menu-item>
                <el-submenu index="2">
                    <template slot="title"><a href="#">课程分类</a></template>
                    <el-menu-item v-for="(item,index) in courseList" :index="'2-'+index+1" :key="index">{{item.subjectTitle}}</el-menu-item>
                </el-submenu>
                <el-menu-item index="3"><a href="#" target="_blank">专属课程</a></el-menu-item>
            </el-menu>
        </div>
        <div class="input-box">
            <input type="text" placeholder="搜索课程">
            <el-button type="primary" icon="el-icon-search" class="search-button">搜索</el-button>
        </div>
        <div class="user-box" style="display: flex">
            <a href="#">
                <span class="shoping-car">
<svg t="1639816175144" class="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3159" width="20" height="20"><path d="M334.366118 602.352941h667.286588L1054.117647 210.823529H248.289882l86.076236 391.529412zM222.117647 150.588235H1054.117647a60.235294 60.235294 0 0 1 59.693177 68.246589l-52.464942 391.529411A60.235294 60.235294 0 0 1 1001.652706 662.588235H336.715294l26.955294 120.470589H933.647059a30.117647 30.117647 0 0 1 0 60.235294H339.516235a30.117647 30.117647 0 0 1-29.394823-23.552L140.167529 60.235294H30.117647a30.117647 30.117647 0 0 1 0-60.235294h134.174118a30.117647 30.117647 0 0 1 29.394823 23.552L222.117647 150.588235zM331.294118 963.764706a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z m602.352941-60.235294a60.235294 60.235294 0 1 0 0-120.470588 60.235294 60.235294 0 0 0 0 120.470588z m0 60.235294a120.470588 120.470588 0 1 1 0-240.941176 120.470588 120.470588 0 0 1 0 240.941176z" fill="#8a8a8a" p-id="3160"></path></svg>
                </span>
            </a>
            <div class="line">
                <span>
                    |
                </span>
            </div>
            <div style="display:flex" v-if="$store.state.isLogin==false">
                <div @click="tologon">
                    <a href="#">登录/注册</a>
                </div>
                <span class="head-portrait">
                <img src="../assets/user.png" alt="" class="head-portrait-img">
                </span>
            </div>
            <el-dropdown v-else>
                <div style="display:flex">
                    <div @click="tologon">
                        <a href="#">{{$store.state.userInfo.nickname}}</a>
                    </div>
                    <span class="head-portrait">
                <img :src="$store.state.userInfo.avatarUrl" alt="" class="head-portrait-img">
                </span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <div @click="targetPersonal"><el-dropdown-item>个人中心</el-dropdown-item></div>
                    <el-dropdown-item>我的课程</el-dropdown-item>
                    <el-dropdown-item>我的订单</el-dropdown-item>
                   <div @click="escPersonal"><el-dropdown-item>退出登录</el-dropdown-item></div>
                </el-dropdown-menu>
            </el-dropdown>

        </div>
        <bounced :isLogon="isLogon"></bounced>
    </div>
</template>

<script>
    import {getCourselist} from "../api";
   import bounced from "./bounced"
    import {escUser} from "../api/personal";
    export default {
        name: "TopHead",
        props:{
            isShow:{
                type:Boolean,
                default:true
            },//课程列表是否显示的参数
        },
        created() {
            getCourselist().then(res=>{
                this.courseList=res.rows
            })
        },
        data() {
                return {
                    activeIndex: '1',
                    activeIndex2: '1',
                    courseList:[],
                    isLogon:false//是否登录
                };
            },
            methods: {
                handleSelect(key, keyPath) {
                    console.log(key, keyPath);
                },
                tologon(){
                    this.isLogon=!this.isLogon
                },
                escPersonal(){
                    escUser().then(res=>{
                        console.log(res)
                        if(res.data.msg=="操作成功"){
                            this.$message({
                                message: '退出成功',
                                type: 'success'
                            });
                            window.location.href="/index"
                        }
                    })
                },
                targetPersonal(){
                    window.location.href="/personal"
                }
            },
            components:{
                bounced//弹框
            }
        }
</script>

<style scoped lang="less">
    @color:#00cf8c;
    @left:159.6px;
    /*整个头部组件根标签*/
    .head-box {
        margin-left: @left;
        margin-right: @left;
        height: 80px;
    }
    /*头部组件在index页面的高度*/
    .head-box-index {
        width: 1200px;
        height: 106px;
    }
    /*头部组件在index没有课程列表的情况下*/
    .head-margin {
        margin-right: 200px;
    }
    /*logo盒子*/
    #logo{
        float: left;
        img {
            width: 179.188px;
            height: 55px;
            margin-top: 16px;
        }
    }
    /*课程列表*/
    .head-list {
        float: left;
        margin: 10px 30px 0 40px;
        /*width: 266.39px;*/
        height: 30px;
        ul {
            border: 0;
        }
        a {
            font-size: 16px;
        }
    }
    .el-menu-item {
        padding-left: 0;
    }
    .el-menu--horizontal>.el-menu-item.is-active {
        border: 0;
    }
    .el-menu-demo {
        /*width: 266.39px;*/
        /*height: 30px;*/
    }
    /*搜索框*/
    .input-box {
        float: left;
        margin-top: 24px;
        margin-right: 6px;
        input {
            float: left;
            width: 317px;
            height: 38px;
            padding: 6px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 20px;
            text-align: inherit;
            font-size: 16px;
            box-sizing: border-box;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            color: rgba(0,0,0,.65);
            border-right: 0;
        }
    }
    /*搜索按钮*/
    .search-button {
        background-color: @color;
        float: left;
        width: 83px;
        height: 38px;
        color: white;
        line-height: 100%;
        border-radius: 20px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border: 1px solid #d9d9d9;
    }
    .search-button:hover{
        background-color: @color;
        border: 1px solid #d9d9d9;
    }
    /*右边购物车及个人*/
    .user-box {
        float: right;
        margin: 26px 100px 0 0;
    }
    .el-icon-s-custom {
        width: 32px;
        height: 32px;
    }
    .shoping-car {
        i {
            width: 20px;
            height: 20px;
        }
    }
    .line {
        height: 18px;
        margin: 0px 10px;
        color: #e8e8e8;
        font-size: 14px;
        line-height: 1.5;
    }
    .head-portrait {
        position: relative;
        display: block;
        margin-left: 8px;
        margin-top: -5px;
        width: 32px;
        height: 32px;
        background: #ccc;
        text-align: center;
        line-height: 32px;
        border-radius: 50%;
    }
    .head-portrait-img{
        position: absolute;
        top: 0px;
        left: 0px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>